<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="applicable-device" content="mobile">
		<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,shrink-to-fit=no,user-scalable=no,minimal-ui" name="viewport">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta content="telephone=no" name="format-detection">
		<!-- UC默认竖屏` UC强制全屏 -->
		<meta name="full-screen" content="yes">
		<meta name="browsermode" content="application">
		<!-- QQ强制竖屏` QQ强制全屏 -->

		<link rel="stylesheet" href="/static/wap/lib/mui.min.css" />

		<link rel="stylesheet" href="/static/wap/css/common.css" />
		<link rel="stylesheet" href="/static/wap/css/login.css" />

		<link rel="stylesheet" href="/static/wap/css/reset.css" />

		<script type="text/javascript" src="/static/wap/lib/jquery-2.1.4.js"></script>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a href="/wap/index/index" class="mui-icon mui-icon-back" style="color: #fff;"></a>
			<h1 class="mui-title">注册</h1>
		</header>
		
		<div class="pading_wrap">
			<div class="login_ipt_wrap">
				<input class="username_ipt ipt_style_login" id="phoneNum" type="number" name="" id="" placeholder="请输入手机号码" value="" />
			</div>
			<div class="login_ipt_wrap">
				<input class="pwd_ipt ipt_style_login" type="password" autocomplete id="password" placeholder="请输入密码" value="" />
			</div>
			<div class="login_ipt_wrap">
				<input class="pwd_ipt ipt_style_login" type="password" autocomplete id="repeatPassword" placeholder="请确认密码" value="" />
			</div>
			<div class="code_ipt_wrap">
				<input class="code_ipt mui-pull-left" type="text" id="codeNum" placeholder="请输入手机验证密码" value="" />
				<input type="button" class="mui-pull-right code_btn" id="sendCode" value="获取验证码" />
			</div>
			
			<input class="loginBtn" id="reginBtn" type="button" value="注册" />
			
			<div class="bottom_regin">
				<input id="checkBook" type="checkbox" checked="checked"> 我已阅读并同意<a href="/user/regAggre">《用户协议》</a>
			</div>
		</div>
		<script src="/static/index/layer/layer.js"></script>
		<script type="text/javascript">
			var baseUrl = 'https://api.qikuai100.com/';
			var countdown = 60;
			$(function() {
				$('#sendCode').click(function() {
					sendCode();
				});
				$('#reginBtn').click(function() {
					regin();
				});
				
			});
			
			/**
			 * 发送验证码
			 * */
			function sendCode() {
				var phone = $("#phoneNum").val();
                var result = isPhoneNum();
                if(result){
                		$.ajax({
						type: "POST",
						url: baseUrl + "api/captcha/register",
						data: {
							"phone": phone
						},
						success: function(result) {
							if(result.ret == 0){
								settime($('#sendCode'));
							}
						}
					});
                }
			}
			
			// 注册
			function regin(){
				var checked = $('#checkBook').prop('checked'),
					phone = $("#phoneNum").val(),
					password1 = $("#password").val(),
					passwordRepeat = $("#repeatPassword").val(),
					codeNum = $("#codeNum").val();
				var result = isPhoneNum();
				if(checked == false){
					layer.msg("请同意用户协议");
					return;
				}
				if(!result){
					return;
				}
				if($.trim(password1) == ""){
					layer.msg("请输入密码");
					return;
				}
				if($.trim(password1).length < 6){
					layer.msg("请输入6位以上的密码");
					return;
				}
				if($.trim(passwordRepeat) != $.trim(password1)){
					layer.msg("两次输入密码不一致");
					return;
				}
				if($.trim(codeNum) == ""){
					layer.msg("请输入验证码");
					return;
				}
				$.ajax({
					type: "POST",
					url: baseUrl + "api/auth/register",
					data: {
						"phone": phone,
						"password": password1,
						"captcha": codeNum
					},
					success: function(result) {
						
						if(result.ret == 0){
							// uid 08087912c8935488000e8d6139f2647f
							console.log(result)
							localStorage.setItem("uid", result.data.uid);
							window.location.href = '/user/regSuccess';
						}else{
							layer.msg(result.res_info);
						}
					}
				});
			}
			
			// 倒计时
			function settime(obj) {
				if(countdown == 0) {
					obj.removeAttr("disabled"); 
					obj.val("获取验证码");
					return;
				} else {
					obj.attr("disabled", true);
					obj.val("重新发送(" + countdown + ")");
					countdown--;
				}
				setTimeout(function() {
					settime(obj);
				}, 1000)
			}
			
			//校验手机号是否合法
			function isPhoneNum() {
				var phone_1 = $("#phoneNum").val();
				var myreg = /^1[34578]\d{9}$/;
				if(!myreg.test(phone_1)) {
					layer.msg("请输入有效的手机号码");
					return false;
				} else {
					return true;
				}
			}
			
		</script>
		
	</body>
</html>
